// StructureFields.tsx
import { ObjectFieldTemplateProps, FieldProps, RJSFSchema } from '@rjsf/utils';
import { Card, Flex, Input, InputNumber, Select } from 'antd';
import React from 'react';
import './index.scss';
export const StructureCardFields = (props: FieldProps) => {
  return (
    <Card
      title={props.schema.title}
      size='small'>
      {(() => {
        // 根据不同的schema类型渲染不同的输入组件
        switch (true) {
          case props.name === 'identityid': // id字段直接显示
            return <div>{props.formData as string}</div>;
          case !!props.schema.oneOf: // 有枚举选项用下拉选择
            return (
              <Select
                value={props.formData}
                options={(props.schema.oneOf as RJSFSchema).map((item) => ({
                  label: item.title,
                  value: item.const,
                }))}
                style={{ width: '100%' }}
                onChange={(value) => props.onChange(value)}
              />
            );
          case props.schema.type === 'number': // 数字类型用数字输入框
            return (
              <InputNumber
                value={props.formData}
                onChange={(value) => props.onChange(value)}
                style={{ width: '100%' }}
                className='centered-input-number'
              />
            );
          default: // 默认用普通输入框
            return (
              <Input
                value={props.formData}
                onChange={(e) => props.onChange(e.target.value)}
                className='centered-input'
              />
            );
        }
      })()}
    </Card>
  );
};

// Flex布局容器
export const ObjectFieldGridTemplate = (props: ObjectFieldTemplateProps) => {
  return (
    <Flex
      wrap='wrap'
      gap='small'
      justify='flex-start'>
      {props.properties.map((element) => (
        <div
          key={element.name}
          style={{
            // 如果 element.name === id，则占满整行
            flexBasis: element.name === 'id' ? '100%' : 'auto',
          }}>
          {element.content}
        </div>
      ))}
    </Flex>
  );
};
